
<!-- LarryMS主题设置模板 -->
<form class="layui-form">
	<div class="larryms-themeset-tit">系统主题设置</div>
	<div class="larryms-themeset-body">
		<!-- 主题配色 -->
		<ul class="theme-scheme">
			<li class="larryms-this default" data-alias="default" title="系统默认主题">
				<div class="larryms-header-theme"></div>
				<div class="larryms-left-theme"></div>
				<div class="larryms-right-theme">
					<span>默认主题</span>
					<div class="larryms-footer-theme"></div>
				</div>
			</li>
			<li class="deepBlue" data-alias="deepBlue" title="深蓝主题">
				<div class="larryms-header-theme"></div>
				<div class="larryms-left-theme"></div>
				<div class="larryms-right-theme">
					<span>深蓝主题</span>
					<div class="larryms-footer-theme"></div>
				</div>
			</li>
			<li class="navy" data-alias="navy" title="藏青主题">
				<div class="larryms-header-theme"></div>
				<div class="larryms-left-theme"></div>
				<div class="larryms-right-theme">
					<span>藏青主题</span>
					<div class="larryms-footer-theme"></div>
				</div>
			</li>
			<li class="green" data-alias="green" title="墨绿主题">
				<div class="larryms-header-theme"></div>
				<div class="larryms-left-theme"></div>
				<div class="larryms-right-theme">
					<span>墨绿主题</span>
					<div class="larryms-footer-theme"></div>
				</div>
			</li>
			<li class="orange" data-alias="orange" title="橙色主题">
				<div class="larryms-header-theme"></div>
				<div class="larryms-left-theme"></div>
				<div class="larryms-right-theme">
					<span>橙色主题</span>
					<div class="larryms-footer-theme"></div>
				</div>
			</li>
			<li class="pink" data-alias="pink" title="粉红主题">
				<div class="larryms-header-theme"></div>
				<div class="larryms-left-theme"></div>
				<div class="larryms-right-theme">
					<span>粉红主题</span>
					<div class="larryms-footer-theme"></div>
				</div>
			</li>
			<li class="purple" data-alias="purple" title="紫色主题">
				<div class="larryms-header-theme"></div>
				<div class="larryms-left-theme"></div>
				<div class="larryms-right-theme">
					<span>紫色主题</span>
					<div class="larryms-footer-theme"></div>
				</div>
			</li>
			<li class="lightgreen" data-alias="lightgreen" title="浅绿主题">
				<div class="larryms-header-theme"></div>
				<div class="larryms-left-theme"></div>
				<div class="larryms-right-theme">
					<span>浅绿主题</span>
					<div class="larryms-footer-theme"></div>
				</div>
			</li>
			<li class="lightred" data-alias="lightred" title="粉红主题">
				<div class="larryms-header-theme"></div>
				<div class="larryms-left-theme"></div>
				<div class="larryms-right-theme">
					<span>粉红主题</span>
					<div class="larryms-footer-theme"></div>
				</div>
			</li>
			<li class="navyblue" data-alias="navyblue" title="深蓝主题">
				<div class="larryms-header-theme"></div>
				<div class="larryms-left-theme"></div>
				<div class="larryms-right-theme">
					<span>深蓝主题</span>
					<div class="larryms-footer-theme"></div>
				</div>
			</li>
			<li class="dangreen" data-alias="dangreen" title="淡绿主题">
				<div class="larryms-header-theme"></div>
				<div class="larryms-left-theme"></div>
				<div class="larryms-right-theme">
					<span>淡绿主题</span>
					<div class="larryms-footer-theme"></div>
				</div>
			</li>
			<li class="skyblue" data-alias="skyblue" title="浅紫主题">
				<div class="larryms-header-theme"></div>
				<div class="larryms-left-theme"></div>
				<div class="larryms-right-theme">
					<span>浅紫主题</span>
					<div class="larryms-footer-theme"></div>
				</div>
			</li>
			<li class="custom" data-alias="custom" title="自定义主题">
                <div class="custom-themeset">自定义系统主题配色</div>
            </li>
		</ul>
		 <div class="custom-box">
           <input type="text" placeholder="顶部颜色" class="layui-input" name="topColor">
            <input type="text" placeholder="顶部选中色" class="layui-input" name="topThis">
            <input type="text" placeholder="顶部下边框" class="layui-input" name="topBottom">
            <input type="text" placeholder="左侧颜色" class="layui-input" name="leftColor">
            <input type="text" placeholder="左侧有边框" class="layui-input" name="leftRight">
            <input type="text" placeholder="菜单选中颜色" class="layui-input" name="navThis">
            <input type="text" placeholder="Tab标题栏下边框" class="layui-input" name="titBottom">
            <input type="text" placeholder="页脚颜色" class="layui-input" name="footColor">
            <input type="text" placeholder="页脚文字颜色" class="layui-input" name="footFont">
        </div>
	</div>
	 <div class="larryms-themeset-sys">
        <div class="larryms-themeset-tit">Tab选项卡相关设置</div>
        <div class="layui-form-item tab-session">
            <label class="layui-form-label">开启Tab缓存</label>
            <div class="layui-input-block">
                <input type="checkbox" id="tabCache" lay-filter="tabSession" lay-skin="switch"  value="1">
                <div class="layui-word-aux">将记录并保持当前状态</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">Tab切换刷新</label>
            <div class="layui-input-block">
                <input type="checkbox" id="tabAutoRefresh" lay-filter="tabAutoRefresh" lay-skin="switch"  value="1">
                <div class="layui-word-aux">切换选项卡将自动刷新</div>
            </div>
        </div>
        <div class="larryms-themeset-tit">其他系统设置（布局）</div>
        <div class="layui-form-item tab-session">
            <label class="layui-form-label">开启页脚</label>
            <div class="layui-input-block">
                <input type="checkbox" id="footSet" lay-filter="footSet" lay-skin="switch"  value="1">
            </div>
        </div>
        <div class="layui-form-item tab-session">
            <label class="layui-form-label">开启全屏</label>
            <div class="layui-input-block">
                <input type="checkbox" id="fullScreen" lay-filter="fullScreen" lay-skin="switch"  value="1">
                <div class="layui-word-aux">客户端将自动全屏</div>
            </div>
        </div>

    </div>
	<div class="layui-btn larryms-setTheme" lay-submit="" lay-filter="submitTheme">保存主题设置</div>
</form>
<script>
    layui.use(['jquery','form','index','layer'],function(){
        var $= layui.jquery,
            form = layui.form,
            layer = layui.layer,
            index = layui.index;

        // 读取缓存配置
        var tName = layui.data('larryms').theme !== undefined ? layui.data('larryms').theme.name :'undefined' ,
            systemSet = layui.data('larryms').systemSet;
        if(tName !== 'undefined'){
            $('.theme-scheme li[data-alias='+tName+']').addClass('larryms-this').siblings().removeClass('larryms-this');
            if($('.theme-scheme li[data-alias="custom"]').hasClass('larryms-this')){
                $('.custom-box').show();
                var curThemes = layui.data('larryms').theme;
                for(attrN  in curThemes ){
                    $('.custom-box input[name='+attrN+']').val(curThemes[attrN]);
                }
            }
        }

        if(systemSet.tabCache){
            $('#tabCache').attr('checked', 'checked');
        }else{
            $('#tabCache').removeAttr("checked");
        }
        if(systemSet.tabRefresh){
            $('#tabAutoRefresh').attr('checked', 'checked');
        }else{
            $('#tabAutoRefresh').removeAttr("checked");
        }
        if(systemSet.footSet == 'on'){
            $('#footSet').attr('checked', 'checked');
        }else{
            $('#footSet').removeAttr("checked");
        }
        if(systemSet.fullScreen){
            $('#fullScreen').attr('checked', 'checked');
        }else{
            $('#fullScreen').removeAttr("checked");
        }
        form.render();
        //设置主题配色
        $('.theme-scheme li').on('click',function(){
            $(this).addClass('larryms-this').siblings().removeClass('larryms-this');
            var themeName = $(this).data('alias');
            if(themeName!=='custom'){
                $('.custom-box').hide();
                if(themeName !=='default'){
                    index.theme(index.themeColor[themeName]);
                }else{
                    index.theme({
                        name:'default',
                    });
                }
            }else{
                $('.custom-box').show();
            }

        });
        //自定义主题配色
        $('.custom-box input').blur(function(){
            var colorStr = $(this).val();
            if(CheckIsColor(colorStr)){
                setCustomTheme($(this).attr('name'),colorStr);
            }else{
                layer.tips('颜色值格式不正确', $(this), {
                    tips: [1, '#FF5722']
                });
            }
        });
        $('.custom-box input').focus(function(){
            $(this).val('');
        });
        function setCustomTheme(attrName,curValue){
            var localValue = layui.data('larryms').theme;
            if(localValue !== undefined){
                localValue.name = 'custom';
                localValue[attrName] = curValue;
                index.theme(localValue);
            }else{
                var options = {name:'custom'};
                options[attrName] = curValue;
                index.theme(options);
            }
        }
        // 系统其他功能项设置
        form.on('switch(tabSession)', function(data) {
            setCurData('tabCache',data.elem.checked);
        });

        form.on('switch(tabAutoRefresh)', function(data) {
            setCurData('tabRefresh',data.elem.checked);
        });
        form.on('switch(footSet)', function(data) {
            var val = data.elem.checked === true ? 'on' : 'off';
            setCurData('footSet',val);
            index.footInit(val);
        });

        function setCurData(name,data){
            var curData = layui.data('larryms').systemSet;
            curData[name] = data;
            layui.data('larryms',{
                key:'systemSet',
                value: curData
            });
        }


        //颜色值检查
        function CheckIsColor(data){
            var type = "^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$";
            var res = new RegExp(type);
            if(data.match(res) == null){
                type= "^[rR][gG][Bb][\(]([\\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?)[\\s]*,){2}[\\s]*(2[0-4]\\d|25[0-5]|[01]?\\d\\d?)[\\s]*[\)]{1}$";
                res = new RegExp(type);
                if(data.match(res) == null){
                    return false;
                }else{
                    return true;
                }
            }else{
                return true;
            }
        }
    });
</script>